<template>
  <div class="ping-box">
    <el-divider content-position="left"><span class="info-title text-base">Ping</span></el-divider>
    <span class="box-color ml-10 text-sm label-width">IP：</span
    ><el-input
      class="machine-code ml-2.5"
      v-model="machineCode"
      @keyup.enter.native="clickPing"
    />
    <el-button class="ml-2.5" @click="clickPing">确定</el-button>
    <span v-if="ipTipFlag" class="text-red-500 text-xs block my-2.5 ml-10">IP地址不正确</span>
    <el-input
      v-if="ipTextareaFlag"
      v-model="ipTextarea"
      class="textarea mt-2.5 ml-10"
      type="textarea"
    />
    <el-divider content-position="left"><span class="info-title text-base">抓包工具</span></el-divider>
    <span class="box-color ml-10 text-sm label-width">抓包命令：</span>
    <el-input
      class="command ml-2.5"
      style="width:350px"
      v-model="command"
      spellcheck="false"
      @keyup.enter.native="clickCommand"
    />
    <el-button class="ml-2.5" @click="clickCommand">确定</el-button>
    <el-button class="ml-2.5" v-if="syslogDownloadFlag" @click.stop="syslogDownload()">下载结果</el-button>
    <br>
    <span class="text-xs inline-block my-2.5 box-color ml-10 label-width"
      >举例：</span
    >
    <span class="text-xs inline-block my-2.5 box-color ml-2.5">tcpdump -i MGT -c 3 -nn udp dst port 80 and src host 10.0.0.10</span>
    <span v-if="commandTipFlag" class="text-red-500 text-xs block my-2.5 ml-10">请正确输入命令</span>
    <el-input
      v-if="commandTextareaFlag"
      v-model="commandTextarea"
      class="textarea mt-2.5 ml-10"
      type="textarea"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { req_geToolPing, req_geToolTcpdump } from "~/utils/axios/setting.js";
import { validIp } from "~/utils/common/validation.js";
import axios from 'axios'

const machineCode = ref('');
const command = ref('');
const ipTextarea = ref();
const commandTextarea = ref('');
const ipTipFlag = ref(false);
const commandTipFlag = ref(false);
const ipTextareaFlag = ref(false);
const commandTextareaFlag = ref(false);

const clickPing = () => {
  if(machineCode.value === ''){
    ipTipFlag.value = true;
    return
  }
  validIp("", machineCode.value, (err) => {
    if (!err) {
      ipTipFlag.value = false;
      ipTextareaFlag.value = true;
      req_geToolPing(machineCode.value).then((res) => {
        ipTextarea.value = res.data;
      });
    } else {
      ipTipFlag.value = true;
    }
  });
};
let syslogGetNum = ref(1)
let syslogFileName = ref('')
let syslogDownloadFlag = ref(false)
const syslogDownload = () => {
  return window.location.href = window.location.protocol + '//' + window.location.host + `/files/pcap/${syslogFileName.value}`;
}
const getCommandFn = (paramId) => {
  axios.get(`/api/v2.0/tool/getTcpdump/${paramId}`).then(res => {
    commandTextarea.value += `\n第${syslogGetNum.value}次发送数据\n正在抓包中...`
    if(res.data === '1'){
      commandTextarea.value += '\n无数据';
    }else if(typeof res.data === 'string' && res.data.substring(res.data.length-4) === 'pcap'){
      setTimeout(() => {
        getCommandFn(paramId)
      },3000)
      syslogGetNum.value++
    }else if(res.data === null){
      syslogDownloadFlag.value = true;
      commandTextarea.value += '抓包已结束！！！,请点击下载按钮下载文件。'
    }
  })
    
}
const clickCommand = () => {
  if(command.value == ''){
    commandTipFlag.value = true;
    return
  }
  syslogGetNum.value = 1;
  req_geToolTcpdump(command.value).then((res) => {
    if(res.data.uuid){
      syslogFileName.value = res.data.fileName;
      commandTextarea.value = '正在发送数据，请稍后...';
      commandTextareaFlag.value = true;
      getCommandFn(res.data.uuid)
    }
  });
};
</script>

<style lang="scss" scoped>
.ping-box{
  background-color: #fff;
  color: #555;
  padding: 20px 30px 20px 40px;
  border-radius: 3px;
  box-shadow: 0px 2px 4px 0px rgba(64, 32, 224, 0.06);
}
.box-color {
  color: #999;
}
.machine-code {
  width: 180px;
}
.command {
  width: 220px;
}
.textarea {
  width: 100%;
  border-radius: 3px;
  :deep(.el-textarea__inner) {
    height: 150px;
    background: #000;
    color: #fff;
    border-radius: 3px;
    box-shadow: none;
    font-size: 12px;
  }
}
.label-width{
  display: inline-block;
  width: 80px;
  text-align: right;
}
</style>
